[@mantine/core] Stepper: Make stepper composite#9076
Open
jonjomckay wants to merge 4 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors @mantine/core Stepper into a composite/compound component API (Stepper.Root, Stepper.Steps, Stepper.Content, Stepper.Completed) while keeping Stepper as a convenience wrapper, and updates docs/demos/tests accordingly.
Changes:
- Added new compound components (
StepperRoot,StepperSteps,StepperContent) and wiredStepperto render through them. - Updated
StepperCompletedto render completed content (including keep-mounted behavior) and added optional context access. - Added coverage and documentation for compound usage, plus new demos/stories and docgen path updates.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/docgen/docgen-paths.ts | Includes new Stepper compound component files in doc generation inputs |
| packages/@mantine/core/src/components/Stepper/StepperSteps/StepperSteps.tsx | New Stepper.Steps implementation that renders step indicators and separators |
| packages/@mantine/core/src/components/Stepper/StepperStep/StepperStep.tsx | Updates StepFragmentComponent type import to new root module |
| packages/@mantine/core/src/components/Stepper/StepperRoot/StepperRoot.tsx | New Stepper.Root that owns context, styles API, and CSS vars |
| packages/@mantine/core/src/components/Stepper/StepperContent/StepperContent.tsx | New Stepper.Content responsible for per-step content rendering (with keepMounted support) |
| packages/@mantine/core/src/components/Stepper/StepperCompleted/StepperCompleted.tsx | Stepper.Completed now renders completed content based on context + step |
| packages/@mantine/core/src/components/Stepper/Stepper.tsx | Refactors Stepper to be a wrapper over the compound components and exposes them as statics |
| packages/@mantine/core/src/components/Stepper/Stepper.test.tsx | Adds tests for compound components API, SSR, styles API, and click behavior |
| packages/@mantine/core/src/components/Stepper/Stepper.story.tsx | Adds Storybook examples for compound usage, including sticky steps |
| packages/@mantine/core/src/components/Stepper/Stepper.context.ts | Extends Stepper context to include active state, click handler, icons, etc., and adds optional context hook |
| packages/@mantine/core/src/components/Stepper/index.ts | Exports new compound components and their types |
| packages/@docs/demos/src/demos/core/Stepper/Stepper.demos.story.tsx | Registers new docs demos for compound variants |
| packages/@docs/demos/src/demos/core/Stepper/Stepper.demo.compound.tsx | Adds compound components demo snippet |
| packages/@docs/demos/src/demos/core/Stepper/Stepper.demo.compoundSticky.tsx | Adds sticky-steps compound demo snippet |
| packages/@docs/demos/src/demos/core/Stepper/index.ts | Exports new demo entries |
| apps/mantine.dev/src/pages/core/stepper.mdx | Documents compound component usage and includes new demos |
| apps/mantine.dev/src/mdx/data/mdx-core-data.ts | Adds compound components to generated props list for the Stepper page |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
jonjomckay
force-pushed
the
feat/make-stepper-composite
branch
from
July 22, 2026 15:16
a477945 to
90b9a27
Compare
| attributes, | ||
| ...others | ||
| } = props; | ||
| const props = useProps('Stepper', null, _props); |
jonjomckay
marked this pull request as ready for review
July 22, 2026 15:22
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Comment on lines
+76
to
+82
| cloneElement(item, { | ||
| icon: item.props.icon || ctx.icon || index + 1, | ||
| key: index, | ||
| step: index, | ||
| state, | ||
| onClick: () => isStepSelectionEnabled && ctx.onStepClick?.(index), | ||
| allowStepClick: isStepSelectionEnabled, |
Comment on lines
+94
to
+95
| /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default "xl" */ | ||
| radius?: MantineRadius; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This refactors
@mantine/core's Stepper into a compound component API (Stepper.Root,Stepper.Steps,Stepper.Content,Stepper.Completed) while keepingStepperas a convenience wrapper, and updates docs/demos/tests accordingly.This change is backwards-compatible, and all current usages of the
Steppercomponent should continue to work as expected.Changes:
StepperRoot,StepperSteps,StepperContent) and refactoredStepperto use them.StepperCompletedcomponent to render the completed content, and added optional context access.This fixes https://github.com/orgs/mantinedev/discussions/8562